<template>
	<view>
		<view class="loading" v-if="loading || fail">
			<u-loading :show="loading"></u-loading>
			<u-empty mode="page" :show="fail"></u-empty>
		</view>
		<block v-else>
			<view class="swiper">
				<swiper circular autoplay indicator-dots indicator-active-color="#fff">
					<swiper-item v-for="(item,index) in swiperList" :key="index">
						<view class="swiper-item">
							<u-image @click="preview(index)" border-radius="20" width="100%" height="400" :src="item.image" />
						</view>
					</swiper-item>
				</swiper>
			</view>
			<u-gap></u-gap>
			<view class="info">
				<view class="left">
					<view class="name">{{info.title}}</view>
					<view class="price">
						<view class="present-price"><text>￥</text>{{info.price || info.packagePrice}}</view>
						<view class="original-price"><text>￥</text>{{info.priceOff || info.orignPrice}}</view>
						<view class="tag">{{info.shareRebateDesc}}</view>
					</view>
				</view>
				<view class="right" @click="openMap">
					<view class="icon">
						<u-image width="68" height="68" :src="appletImgUrl+'kb-map-icon.png'"></u-image>
					</view>
					<view class="tip">去导航</view>
				</view>
			</view>
			<view class="store-name">
				<view>{{info.merchantName}}</view>
				<view>距离：{{distance}}</view>
			</view>
			<view class="describe">
				<view>
					{{info.useDayDesc}}
				</view>
				<view>
					<view>活动时间：</view>
					<view>{{info.validStartTime}} - {{info.validEndTime || '长期'}}</view>
				</view>
				<view>
					<view>规则说明：</view>
					<view v-if="type == 'setMeal'">{{info.useDesc == '' ? '暂无说明' : info.useDesc}}</view>
					<view v-else>{{info.description == '' ? '暂无说明' : info.description}}</view>
				</view>
				<view v-if="type != 'coupon'">
					<view>套餐描述：</view>
					<view>{{info.content || '暂无描述'}}</view>
				</view>
			</view>
			<view class="share" v-if="showShareData == 1">
				<view class="title">
					<u-image width="368" height="48" :src="appletImgUrl+'setmeal-share-title-bg.png'"></u-image>
				</view>
				<view class="tab-box">
					<view class="tab">
						<u-tabs :bar-style="barStyle" active-color="#333" inactive-color="#aaa" :list="tabs" :is-scroll="false" :current="current"
						 @change="choiceTab"></u-tabs>
					</view>
				</view>
				<view class="list">
					<view class="item" v-for="(item,index) in list" :key="index">
						<u-image shape="circle" width="68" height="68" :src="item.headPhoto"></u-image>
						<view class="item-info">
							<view>{{item.nickName}}</view>
							<view class="text">订单号：{{item.orderNumber}}</view>
							<view class="text">购买时间：{{item.addTime}}</view>
						</view>
						<view class="state">
							<view><text>￥</text>{{item.packagePrice || item.price}}</view>
							<view>{{item.statusDesc}}</view>
						</view>
					</view>
				</view>
				<u-gap></u-gap>
				<u-loadmore :status="status" />
			</view>
			<view class="bar">
				<view class="bar-box">
					<button open-type="share" class="icon" @click="share">
						<u-icon size="48" name="zhuanfa"></u-icon>
						<view>分享</view>
					</button>
					<view class="btn-box">
						<view :class="['btn',info.status == 1 ? '' : 'disabled']" @click="purchase" v-if="showCodeBtn == 0">
							立即购买
						</view>
						<view class="btn" @click="setStorageSync()" v-else>
							展示二维码
						</view>
					</view>
				</view>
				<view class="safe-area-inset-bottom"></view>
			</view>
			<u-gap height="150"></u-gap>
			<view class="safe-area-inset-bottom"></view>
			<u-popup :mask-close-able="false" v-model="show" mode="center" :backgroundColor="'transparent'">
				<view class="popup">
					<view class="btn" @click="show = false">

					</view>
					<view class="btn see" @click="$u.route('/pages/user/myCard/myCard',{
						myCardTabIndex:type == 'setMeal' ? 1 : 2
					});show = false">

					</view>
					<u-image :fade="false" :show-loading="false" width="580" height="960" :src="imageURL+'USER/05fd29c2-cf90-4f60-b731-51ce62c50878.png'"></u-image>
				</view>
			</u-popup>
		</block>
	</view>
</template>

<script>
import {appletImgUrl} from "@/common/config.js"
	import QQMapWX from "@/common/qqmap-wx-jssdk.min"
	let qqmapsdk = ''
	import WSCoordinate from '@/js_sdk/WSCoordinate'
	export default {
		onShareTimeline() {
			return {
				title: this.info.title,
				path: '/pages/other/setmeal/setmeal?id=' + this.info.id + '&userId=' + uni.getStorageSync(
						'userInfo').id + '&type=' +
					this.type,
				imageUrl: this.info.couponImg
			}
		},
		onShareAppMessage() {
			return {
				title: this.info.title,
				path: '/pages/other/setmeal/setmeal?id=' + this.info.id + '&userId=' + uni.getStorageSync(
						'userInfo').id + '&type=' +
					this.type,
				imageUrl: this.info.couponImg
			}
		},
		data() {
			return {
				appletImgUrl:appletImgUrl,
				status: 'loading',
				barStyle: {
					'background': 'linear-gradient(90deg, #FF7200, #FFA200)',
					'border-radius': '3rpx'
				},
				current: 0,
				tabs: [{
						name: '购买记录'
					}, {
						name: '已核销'
					},
					{
						name: '已过期'
					}
				],
				show: false,
				showShareData: 0,
				imageURL: this.imageURL,
				swiperList: [],
				loading: true,
				fail: false,
				info: '',
				distance: '',
				type: '',
				orderNumber: '',
				list: [],
				showCodeBtn: 0
			};
		},
		onLoad(options) {
			const self = this
			let coordinate = options.coordinate ? JSON.parse(options.coordinate) : ''
			this.orderNumber = options.orderNumber ? options.orderNumber : ''
			if (options.userId) {
				if (!uni.getStorageSync('userInfo')) {
					uni.setStorageSync('proUserId', options.userId)
					this.shareUserId = options.userId
				} else {
					if (options.userId != uni.getStorageSync('userInfo').id) {
						this.shareUserId = options.userId
					} else {
						this.shareUserId = ''
					}
				}
			} else {
				this.shareUserId = ''
			}
			this.showCodeBtn = options.showCodeBtn ? options.showCodeBtn : 0
			this.showShareData = options.showShareData ? options.showShareData : 0
			qqmapsdk = new QQMapWX({
				key: 'HQSBZ-EMKE5-6N5IW-QYGDQ-U6EMS-P2BOO'
			});
			this.type = options.type
			this.statusList = null
			this.pageNo = 1
			if (this.showShareData) {
				this.getShareData(res => {
					this.list = res
					this.status = res.length < 10 ? 'nomore' : 'loadmore'
				})
			}
			if (options.type == 'setMeal') {
				this.$u.get('sharepackage/info/' + options.id).then(res => {
					
					this.loading = false
					if(JSON.stringify(res) == "{}"){
						this.fail = true
						return
					}
					res.couponImg = res.sharePackageImg ? res.sharePackageImg.split(',') : []
					if (res.couponImg != '') {
						this.swiperList = res.couponImg.map(item => {
							return {
								image: this.imageURL + item
							}
						})
					}
					uni.setNavigationBarTitle({
						title: res.title
					})
					this.info = res
					if (coordinate == '') {
						const self = this
						uni.getLocation({
							type: 'gcj02',
							altitude: true,
							success(even) {
								coordinate = {
									latitude: even.latitude,
									longitude: even.longitude
								}
								self.calculationDistance(coordinate)
							}
						})
					} else {
						this.calculationDistance(coordinate)
					}
				}).catch(error => {
					this.loading = false
					this.fail = true
				})
			}
			if (options.type == 'coupon') {
				this.$u.get('coupon/info/' + options.id).then(res => {
					this.loading = false
					// res.couponImg = res.couponImg ? this.imageURL + res.couponImg : ''
					// this.swiperList = [{
					// 	image: res.couponImg
					// }]
					
					res.couponImg = res.couponImg ? res.couponImg.split(',') : []
					if (res.couponImg != '') {
						this.swiperList = res.couponImg.map(item => {
							return {
								image: this.imageURL + item
							}
						})
					}
					
					
					uni.setNavigationBarTitle({
						title: res.title
					})
					this.info = res
					if (coordinate == '') {
						const self = this
						uni.getLocation({
							type: 'gcj02',
							altitude: true,
							success(even) {
								coordinate = {
									latitude: even.latitude,
									longitude: even.longitude
								}
								self.calculationDistance(coordinate)
							}
						})
					} else {
						this.calculationDistance(coordinate)
					}

				}).catch(error => {
					this.loading = false
					this.fail = true
				})
			}
		},
		onReachBottom() {
			if (this.showShareData == 0) return
			if (this.status == 'loading' || this.status == 'nomore') return
			this.pageNo++
			this.status = 'loading'
			this.getShareData(res => {
				if (res == '') {
					this.status = 'nomore'
					return
				}
				this.status = 'loadmore'
				this.list = this.list.concat(res)
			})
		},
		methods: {
			setStorageSync() {
				uni.setStorageSync('writeOffData', this.info)
				this.$u.route('/pages/other/writeOff/writeOff', {
					orderNumber: this.orderNumber
				});
			},
			choiceTab(e) {
				this.current = e
				let statusList
				switch (e) {
					case 0:
						statusList = [20]
						break
					case 1:
						statusList = [30]
						break
					case 2:
						statusList = [40]
						break
				}
				this.statusList = statusList
				this.status = 'loading'
				this.pageNo = 1
				this.getShareData(res => {
					this.list = res
					this.status = res.length < 10 ? 'nomore' : 'loadmore'
				})
			},
			getShareData(call) {
				if (this.type == 'setMeal') {
					this.$u.post('sharepackage/listDrawFromPushSharePackage', {
						pageNo: this.pageNo,
						pageSize: 10,
						sharePackageId: this.id,
						statusList: this.statusList
					}).then(res => {
						if (res.list != '') {
							res.list.forEach(item => {
								if (item.headPhoto) {
									if (item.headPhoto.indexOf("https") != 0) {
										item.headPhoto = this.imageURL + item.headPhoto
									}
								} else {
									item.headPhoto = this.appletImgUrl+'team-head-img.png'
								}
							})
						}
						call(res.list)
					}).catch(error => {
						this.status = 'loadmore'
					})
				} else {
					this.$u.post('coupon/listBuyFromShareCoupon', {
						pageNo: this.pageNo,
						pageSize: 10,
						couponId: this.id,
						statusList: this.statusList
					}).then(res => {
						if (res.list != '') {
							res.list.forEach(item => {
								if (item.headPhoto) {
									if (item.headPhoto.indexOf("https") != 0) {
										item.headPhoto = this.imageURL + item.headPhoto
									}
								} else {
									item.headPhoto = this.appletImgUrl+'team-head-img.png'
								}
							})
						}
						call(res.list)
					}).catch(error => {
						this.status = 'loadmore'
					})
				}
			},
			paySuccessCallBack() {
				this.show = true
			},
			purchase() {
				if (this.info.status != 1) {
					uni.showToast({
						title: this.info.statusDesc,
						icon: 'none'
					});
					return
				}
				if (!uni.getStorageSync('userInfo')) {
					this.$u.route('/pages/user/login/login')
					return
				}
				this.$u.route('/pages/purchase/pay/pay', {
					money: this.info.price || this.info.packagePrice,
					scene: this.type,
					couponId: this.info.id,
					shareUserId: this.shareUserId
				})
			},
			share() {
				if (this.type == 'setMeal') {
					this.$u.post('sharepackage/pushSharePackage', {
						sharePackageId: this.info.id
					})
					return
				}
				this.$u.post('coupon/shareCoupon', {
					couponId: this.info.id
				})
			},
			calculationDistance(coordinate) {
				const self = this
				let GCJ_Coordinate = WSCoordinate.transformFromBaiduToGCJ(this.info.latitude, this.info.longitude);
				qqmapsdk.calculateDistance({
					from: `${coordinate.latitude},${coordinate.longitude}`,
					to: `${GCJ_Coordinate.latitude},${GCJ_Coordinate.longitude}`,
					success({
						result
					}) {
						let {
							elements
						} = result
						let distance = elements[0].distance
						distance = distance < 1000 ? distance + '米' : (Math.round(distance / 100) / 10).toFixed(1) +
							'公里'
						self.distance = distance
					}
				})
			},
			openMap() {
				let GCJ_Coordinate = WSCoordinate.transformFromBaiduToGCJ(this.info.latitude, this.info.longitude);
				uni.openLocation({
					latitude: GCJ_Coordinate.latitude,
					longitude: GCJ_Coordinate.longitude,
					name: this.info.merchantName,
					address: this.info.merchantAddress
				})
			},
			preview(index) {
				let new_arr = this.swiperList.map(item=>{
					return item.image
				})
				uni.previewImage({
					current:index,
					urls: new_arr
				})
			}
		}
	}
</script>

<style lang="scss">
	.share {
		padding-top: 30rpx;

		.list {
			.item {
				display: flex;

				.state {
					text-align: right;
					align-self: flex-end;

					text {
						font-size: 24rpx;
					}

					font-size: 30rpx;

					>view {
						&:last-child {
							font-size: 24rpx;
							color: #AAAAAA;
						}
					}
				}

				.item-info {
					margin: 0 20rpx;
					flex: 1;

					>view {
						font-size: 30rpx;
						color: #333333;

						&.text {
							font-size: 24rpx;
							color: #aaa;
						}
					}
				}

				margin-top: 40rpx;
			}
		}

		.tab-box {
			position: relative;
			margin-top: 10rpx;

			&::after {
				width: 690rpx;
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				bottom: 3px;
				content: '';
				height: 1rpx;
				background-color: #E5E5E5;
			}
		}

		margin: 0 30rpx;

		.tab {
			width: 60%;

		}

		.title {
			display: flex;
			justify-content: center;
		}
	}

	.loading {
		height: 100vh;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.popup {
		position: relative;

		.btn {
			width: 68rpx;
			height: 68rpx;
			z-index: 1;
			border-radius: 50%;
			position: absolute;
			bottom: 5rpx;
			left: 50%;
			transform: translateX(-50%);

			&.see {
				width: 310rpx;
				border-radius: 0;
				bottom: 225rpx;
			}
		}
	}

	.bar {
		position: fixed;
		width: 100%;
		left: 0;
		bottom: 0;
		background-color: #fff;
		z-index: 1;
		box-shadow: 2rpx -20rpx 20rpx 0px rgba(220, 220, 219, 0.2);

		.bar-box {
			display: flex;
			align-items: center;
			height: 120rpx;
			padding-right: 30rpx;

			button {
				background-color: transparent;
				line-height: normal;
				font-size: 30rpx;
				padding: 0;
				margin: 0;

				&::after {
					transform: scale(1);
					border: none;
				}
			}

			.icon {
				padding: 0 30rpx;
				text-align: center;
			}

			.btn-box {
				display: flex;
				flex: 1;
			}

			.btn {
				background-color: #FF4D46;
				flex: 1;
				text-align: center;
				line-height: 80rpx;
				color: #fff;
				font-size: 30rpx;
				border-radius: 20rpx;

				&.disabled {
					opacity: .5;
				}
			}
		}
	}

	.describe {
		padding: 15rpx 30rpx;

		>view {
			display: flex;
			padding: 15rpx 0;
			font-size: 30rpx;

			view {
				&:last-child {
					flex: 1;
				}
			}
		}
	}

	.store-name {
		margin: 0 30rpx;
		padding: 30rpx 0;
		display: flex;
		border-bottom: 1rpx solid #EEEEEE;
		justify-content: space-between;
		align-items: center;

		>view {
			&:first-child {
				font-size: 30rpx;
			}

			&:last-child {
				font-size: 24rpx;
				color: #aaa;
				border-left: 1rpx solid #BFBFBF;
				padding-left: 20rpx;
			}
		}
	}

	.info {
		display: flex;
		padding: 0 30rpx;
		justify-content: space-between;
		align-items: center;

		.right {
			.tip {
				font-size: 30rpx;
				margin-top: 15rpx;
			}

			.icon {
				width: 68rpx;
				margin: 0 auto;
				border-radius: 50%;
				box-shadow: 0 0 25rpx rgba($color: #000000, $alpha: .1);
			}
		}

		.left {
			flex: 1;

			.name {
				font-size: 48rpx;
				font-weight: bold;
				margin-bottom: 10rpx;
			}

			.price {
				display: flex;
				align-items: center;

				>view {
					&.tag {
						background-color: rgba($color: #F44B17, $alpha: .1);
						line-height: 40rpx;
						font-size: 24rpx;
						color: #F44B17;
						padding: 0 15rpx;
						border-radius: 20rpx;
					}

					&.original-price {
						margin: 0 20rpx;
						color: #AAAAAA;
						font-size: 30rpx;
						text-decoration: line-through;

						text {
							font-size: 24rpx;
						}
					}

					&.present-price {
						color: #F44B17;
						font-size: 40rpx;
						font-weight: bold;

						text {
							font-weight: normal;
							font-size: 30rpx;
						}
					}
				}
			}
		}
	}

	.swiper {
		swiper {
			height: 400rpx;

			.swiper-item {
				padding: 0 30rpx;
				height: 100%;

				video {
					width: 100%;
				}
			}
		}
	}
</style>
